<template>
  <div class="dashboard-container">
    <div class="welcome-section">
      <h1>校园监控信息管理系统</h1>
      <p>欢迎使用校园监控信息管理系统，请选择以下功能</p>
    </div>
    <!-- 功能方块区域 -->
    <div class="function-cards">
      <!-- 学生端功能方块 -->
      <div v-if="userRoles.includes('student')" class="card-container">
        <div class="function-card" @click="goto('monitor/request/request')">
          <div class="card-icon">
            <i class="el-icon-video-camera"></i>
          </div>
          <div class="card-title">监控调用申请</div>
          <div class="card-desc">提交监控录像查看申请</div>
        </div>
        
        <div class="function-card" @click="goto('monitor/request/record')">
          <div class="card-icon">
            <i class="el-icon-document"></i>
          </div>
          <div class="card-title">监控调用记录</div>
          <div class="card-desc">查看历史申请记录</div>
        </div>
      </div>
      
      <!-- 教师端功能方块 -->
      <div v-if="userRoles.includes('teacher')" class="card-container">
        <div class="function-card" @click="goto('monitor/request/request')">
          <div class="card-icon">
            <i class="el-icon-video-camera"></i>
          </div>
          <div class="card-title">监控调用申请</div>
          <div class="card-desc">提交监控录像查看申请</div>
        </div>
        
        <div class="function-card" @click="goto('monitor/request/approval')">
          <div class="card-icon">
            <i class="el-icon-check"></i>
          </div>
          <div class="card-title">学生调用审批</div>
          <div class="card-desc">审批学生的监控调用申请</div>
        </div>
      </div>
      
      <!-- 管理员端功能方块 -->
      <div v-if="userRoles.includes('admin')" class="card-container">
        <div class="function-card" @click="goto('monitor/request/request')">
          <div class="card-icon">
            <i class="el-icon-s-check"></i>
          </div>
          <div class="card-title">监控调用审批</div>
          <div class="card-desc">审批监控调用申请</div>
        </div>
        
        <div class="function-card" @click="goto('system/notice')">
          <div class="card-icon">
            <i class="el-icon-bell"></i>
          </div>
          <div class="card-title">公告管理</div>
          <div class="card-desc">管理系统公告信息</div>
        </div>
      </div>
    </div>
    
    <!-- 公告区域 -->
    <div class="announcement-section">
      <div class="section-header">
        <h2>系统公告</h2>
      </div>
      <el-table
        v-loading="loading"
        :data="noticeList"
        class="notice-table"
        :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
      >
        <el-table-column label="序号" align="center" prop="noticeId" width="80" />
        <el-table-column
          label="公告标题"
          align="center"
          prop="noticeTitle"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="公告类型" align="center" prop="noticeType" width="100">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_notice_type" :value="scope.row.noticeType"/>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status" width="100">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_notice_status" :value="scope.row.status"/>
          </template>
        </el-table-column>
        <el-table-column label="发布时间" align="center" prop="createTime" width="120">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { listNotice } from "@/api/system/notice";

export default {
  name: 'Index',
  dicts: ['sys_notice_status', 'sys_notice_type'],
  data() {
    return {
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
      },
      loading: true,
      noticeList: []
    }
  },
  computed: {
    userRoles() {
      try {
        return this.$store && this.$store.state && this.$store.state.user && this.$store.state.user.roles ? 
          this.$store.state.user.roles : [];
      } catch (e) {
        console.error('获取用户角色失败', e);
        return [];
      }
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      listNotice(this.queryParams).then(response => {
        this.noticeList = response.rows;
        this.total = response.total;
        this.loading = false;
      }).catch(error => {
        console.error('获取公告列表失败', error);
        this.loading = false;
      });
    },
    
    goto(path) {
      this.$router.push({ path });
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 50px);
  
  .welcome-section {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px 0;
    
    h1 {
      font-size: 28px;
      color: #303133;
      margin-bottom: 15px;
    }
    
    p {
      color: #606266;
      font-size: 16px;
    }
  }
  
  .function-cards {
    margin-bottom: 40px;
    
    .card-container {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 30px;
    }
    
    .function-card {
      width: 260px;
      height: 220px;
      background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%);
      border-radius: 12px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      padding: 20px;
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12);
        
        &::after {
          opacity: 0.1;
        }
      }
      
      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, #409EFF 0%, #67C23A 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 1;
      }
      
      .card-icon {
        position: relative;
        z-index: 2;
        font-size: 50px;
        color: #409EFF;
        margin-bottom: 20px;
      }
      
      .card-title {
        position: relative;
        z-index: 2;
        font-size: 20px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 10px;
      }
      
      .card-desc {
        position: relative;
        z-index: 2;
        font-size: 14px;
        color: #606266;
        text-align: center;
      }
    }
  }
  
  .announcement-section {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    padding: 20px;
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      border-bottom: 1px solid #ebeef5;
      padding-bottom: 15px;
      
      h2 {
        font-size: 18px;
        color: #303133;
        font-weight: 600;
        margin: 0;
      }
    }
    
    .notice-table {
      width: 100%;
    }
  }
}
</style>
